import React from "react"
import clsx from "clsx"
import { Conversations } from "@ant-design/x"
import { DeleteOutlined, EditOutlined } from "@ant-design/icons"
import logo from "@/assets/images/dog.svg"
import { Plus } from "../icon"
import { menus } from "@/config/menu"
import { useLocation, useNavigate } from "react-router"
import useChatStore from "@/stores/chat"
import "./index.scss"
import dayjs from "dayjs"

/**
 * 侧边栏
 */
const SidebarMenu: React.FC = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { conversations, curConversation, setConversationsAction, setCurConversationAction } = useChatStore()

  return (
    <div className="sidebar-menu">
      <div className="sidebar-menu__header">
        <div className="sidebar-menu__logo">
          <img src={logo} alt="logo" />
          <span className="title">XYZ</span>
        </div>
      </div>
      <div
        className="toolbar__chat"
        onClick={() => {
          const now = dayjs().valueOf().toString()

          // 新增会话后，重新设置会话列表
          setConversationsAction([
            {
              key: now,
              label: `New Conversation ${conversations.length + 1}`,
              group: "Today"
            },
            ...conversations
          ])
          // 设置最新的会话为当前会话
          setCurConversationAction(now)
        }}
      >
        <span className="semi-icon semi-icon-default">
          <Plus />
        </span>
        <span className="label">新对话</span>
      </div>
      <div className="sidebar-menu__content">
        <div className="sidebar-menu__toolbar">
          {menus.map((menu) => (
            <div
              className={clsx("toolbar__item", { "toolbar__item--active": location.pathname === menu.path })}
              key={menu.key}
              onClick={() => navigate(menu.path)}
            >
              <span className="semi-icon semi-icon-default">{menu.icon}</span>
              <span className="label">{menu.label}</span>
            </div>
          ))}
        </div>
        <div className="sidebar-menu__conversions">
          <div className="history-conversions">
            <span>历史会话</span>
          </div>
          <Conversations
            items={conversations}
            className="conversations"
            activeKey={curConversation}
            onActiveChange={async (val) => {
              // The abort execution will trigger an asynchronous requestFallback, which may lead to timing issues.
              // In future versions, the sessionId capability will be added to resolve this problem.
              setTimeout(() => {
                setCurConversationAction(val)
              }, 100)
            }}
            groupable
            styles={{ item: { padding: "0 8px" } }}
            menu={(conversation) => ({
              items: [
                {
                  label: "Rename",
                  key: "rename",
                  icon: <EditOutlined />
                },
                {
                  label: "Delete",
                  key: "delete",
                  icon: <DeleteOutlined />,
                  danger: true,
                  onClick: () => {
                    const newList = conversations.filter((item) => item.key !== conversation.key)
                    const newKey = newList?.[0]?.key
                    setConversationsAction(newList)
                    // The delete operation modifies curConversation and triggers onActiveChange, so it needs to be executed with a delay to ensure it overrides correctly at the end.
                    // This feature will be fixed in a future version.
                    setTimeout(() => {
                      // 删除的是当前会话，需要重新设置当前会话为会话列表中的第一条
                      if (conversation.key === curConversation) {
                        setCurConversationAction(newKey)
                      }
                    }, 200)
                  }
                }
              ]
            })}
          />
        </div>
      </div>
    </div>
  )
}

export default SidebarMenu
